<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="isVisible"
    width="90%"
    :close-on-click-modal="false"
    top="10%"
    :show-close="false"
    center
  >
    <!-- 卡片列表容器（可滚动） -->
    <div class="word-group-container">
      <!-- 无数据提示 -->
      <div v-if="!wordData || wordData.length === 0" class="no-data">
        <i class="el-icon-document"></i>
        <p>暂无单词组数据</p>
      </div>

      <!-- 单词组列表 -->
      <div v-else class="word-group-list">
        <div
          v-for="(group, index) in wordData"
        >
          <div
            v-if="index<=maxGroupIndex"
            :key="index"
            class="word-group-item"
            :class="{ 'selected-item': isSelected(index) }"
            @click="handleCardSelect(index)"
          >
            <!-- 卡片标题区 -->
            <div class="group-header">
              <h4 class="group-name">第 {{ index + 1 }} 组单词</h4>
              <span class="word-count">共 {{ group.length }} 个单词</span>
            </div>

            <!-- 单词标签区域 -->
            <div class="word-tags">
              <el-tag
                v-for="(word, wordIndex) in group"
                :key="word.id"
                type="info"
                effect="plain"
                size="mini"
                class="word-tag"
              >
                {{ word.fullSpell || word.wordFullSpell }}
              </el-tag>
            </div>

            <!-- 选中状态图标 -->
            <div v-if="isSelected(index)" class="selected-icon">
              <i class="el-icon-check"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="isVisible = false">取消</el-button>
      <el-button
        type="primary"
        :disabled="selectedGroupIndices.length === 0"
        @click="handleConfirm"
      >
        确认选择 ({{ selectedGroupIndices.length }})
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'WordGroupDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '单词组选择'
    },
    wordData: {
      type: Array,
      default: () => []
    },
    maxGroupIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 存储选中的索引数组（支持多选）
      selectedGroupIndices: []
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    dialogTitle() {
      return this.title || '单词组选择'
    }
  },
  watch: {
    // 弹窗关闭时重置选中状态
    visible(newVal) {
      if (!newVal) {
        this.selectedGroupIndices = []
      }
    }
  },
  methods: {
    // 判断是否选中
    isSelected(index) {
      return this.selectedGroupIndices.includes(index)
    },

    // 处理卡片选择（切换选中状态）
    handleCardSelect(index) {
      if (this.isSelected(index)) {
        // 已选中则取消
        this.selectedGroupIndices = this.selectedGroupIndices.filter(i => i !== index)
      } else {
        // 未选中则添加
        this.selectedGroupIndices.push(index)
      }
    },

    // 确认选择
    handleConfirm() {
      // 整理选中的数据
      const selectedGroups = this.selectedGroupIndices.map(index => ({
        groupIndex: index + 1,
        groupId: this.wordData[index][0]?.groupId || '',
        wordList: this.wordData[index]
      }))

      this.$emit('confirm', {
        selectedCount: this.selectedGroupIndices.length,
        groups: selectedGroups
      })
      this.isVisible = false
    }
  }
}
</script>

<style scoped>
/* 弹窗内容容器 */
.word-group-container {
  height: 500px;
  overflow-y: auto;
  padding: 1.5rem;
  background-color: #fafafa;
}

/* 滚动条美化 */
.word-group-container::-webkit-scrollbar {
  width: 6px;
}

.word-group-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.word-group-container::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 10px;
  transition: background 0.3s;
}

.word-group-container::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

/* 无数据样式 */
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  text-align: center;
}

.no-data i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* 单词组列表 */
.word-group-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
}

/* 单词组卡片样式 */
.word-group-item {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  position: relative;
  overflow: hidden;
}

/* 卡片hover效果 */
.word-group-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* 选中状态样式 */
.word-group-item.selected-item {
  border-left-color: #409eff;
  background-color: rgba(64, 158, 255, 0.05);
}

/* 卡片标题区 */
.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #f5f5f5;
}

.group-name {
  font-size: 1rem;
  color: #2c3e50;
  margin: 0;
  font-weight: 600;
}

.word-count {
  font-size: 0.85rem;
  color: #666;
  background-color: #f5f7fa;
  padding: 2px 8px;
  border-radius: 12px;
  margin-right: 20px;
}

/* 单词标签容器 */
.word-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-right: 4px;
}

/* 单词标签样式 */
.word-tag {
  font-size: 14px !important;
  border-radius: 16px !important;
  transition: all 0.2s ease;
}

.word-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(64, 158, 255, 0.15);
}

/* 选中图标 */
.selected-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #409eff;
  font-size: 1.1rem;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 覆盖Element默认样式 */
::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}

::v-deep .el-dialog__footer {
  padding: 15px 20px 20px !important;
  border-top: 1px solid #f5f5f5;
}

::v-deep .el-tag--plain.el-tag--info {
  border-color: #e1f0ff !important;
  color: #409eff !important;
}
</style>
